<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
        <meta name="viewport" content="initial-scale=1,maximum-scale=1, minimum-scale=1">

        <script type="text/javascript">
            const siteUrl = "./",
                musicMp3 = "media/bgm.mp3"
        </script>

        <link rel="stylesheet" href="css/music.css" type="text/css" />
        <link rel="stylesheet" href="css/animate.css" type="text/css" />
        <link rel="stylesheet" href="css/common.css" type="text/css" />
	</head>
	<body>

        <div class="pop-bg">
            <div class="pop-box" id="choose">
                <p>挑一只喜欢的牛福气吧</p>
                <div class="choose-box flex">
                    <div class="choose-box-item male chosen"></div>
                    <div class="choose-box-item female"></div>
                </div>
                <button class="choose-confirm">就TA了</button>
            </div>

            <div class="pop-box" id="gameTips">
                <img class="game-tips-img" src="images/game_tips_img.png" alt="" />
                <img class="game-tips-gif" src="images/game_tips_gif.gif" alt="" />
                <button class="game-tips-confirm">知道了</button>
            </div>

            <div class="pop-box" id="gameOverNoRedbag">
                <h1>很遗憾</h1>
                <p>2万份红包已全部送出！</p>
                <p>闯进冲天排行榜TOP10</p>
                <p>还能赢大礼哦！</p>
                <img class="pop-failed-img" src="images/pop_failed_img.jpg" alt="" />
                <div class="pop-btn-box flex">
                    <button class="play-again-btn">再玩一次</button>
                    <button class="share-btn">约人挑战</button>
                </div>
            </div>

            <div class="pop-box" id="gameOverFailed">
                <h1>很遗憾</h1>
                <p>你离红包仅有一步之遥啦， <br />继续加油鸭！</p>
                <img class="pop-failed-img" src="images/pop_failed_img.jpg" alt="" />
                <div class="pop-redbag-box flex">
                    <img src="images/redbag_img.png" alt="" />
                    <p>邀请10个好友来挑战， <br />可<span>额外获得1个红包</span>。</p>
                </div>
                <div class="pop-btn-box flex">
                    <button class="play-again-btn">再玩一次</button>
                    <button class="share-btn">约人挑战</button>
                </div>
            </div>

            <div class="pop-box" id="gameOverSuccess">
                <img class="success-title" src="images/pop_success_title.png" alt="" />
                <p>您在“牛气冲天”游戏中</p>
                <p>成功上升<span>666</span>米，</p>
                <p>请前往公众号领取现金红包。</p>
                <img class="pop-success-img" src="images/pop_success_img.jpg" alt="" />
                <div class="pop-redbag-box flex">
                    <img src="images/redbag_img.png" alt="" />
                    <p>邀请10个好友来挑战， <br />可<span>额外获得1个红包</span>。</p>
                </div>
                <div class="pop-btn-box flex">
                    <button class="play-again-btn">再玩一次</button>
                    <button class="share-btn">约人挑战</button>
                </div>
            </div>

            <div class="pop-box" id="gameOverNotBreak">
                <h1>很遗憾</h1>
                <p>本次挑战未能突破您的最佳成绩</p>
                <p>继续加油鸭！</p>
                <p><br /></p>
                <p>您的最佳排名：</p>
                <div class="pop-rank">16</div>
                <div class="pop-redbag-box flex">
                    <img src="images/redbag_img.png" alt="" />
                    <p>邀请10个好友来挑战， <br />可<span>额外获得1个红包</span>。</p>
                </div>
                <div class="pop-btn-box flex">
                    <button class="play-again-btn">再玩一次</button>
                    <button class="share-btn">约人挑战</button>
                </div>
            </div>

            <div class="pop-box" id="gameOverBreak">
                <img class="success-title" src="images/pop_break_title.png" alt="" />
                <p>恭喜您突破您的最佳战绩！</p>
                <p>再接再厉鸭！</p>
                <p><br /></p>
                <p>您的最佳排名：</p>
                <div class="pop-rank">16</div>
                <div class="pop-redbag-box flex">
                    <img src="images/redbag_img.png" alt="" />
                    <p>邀请10个好友来挑战， <br />可<span>额外获得1个红包</span>。</p>
                </div>
                <div class="pop-btn-box flex">
                    <button class="play-again-btn">再玩一次</button>
                    <button class="share-btn">约人挑战</button>
                </div>
            </div>

            <div class="pop-box" id="choose1">
                <p>换只小牛试试</p>
                <div class="choose-box flex">
                    <div class="choose-box-item male chosen"></div>
                    <div class="choose-box-item female"></div>
                </div>
                <div class="pop-choose-redbag-box flex">
                    <p>目前还没有好友接受挑战</p>
                    <div class="pop-choose-redbag flex">
                        <div class="pop-redbag onthis"></div>
                        <div class="pop-choose-redbag-people flex">
                            <img src="images/icon_people.png" alt="" />
                            <p>x<span>0</span></p>
                        </div>
                        <div class="pop-redbag"></div>
                    </div>
                </div>
                <div class="pop-btn-box flex">
                    <button class="game-tips-confirm no-mar">开始游戏</button>
                    <button class="share-btn">约人挑战</button>
                </div>
            </div>
        </div>

        <div class="page game">
            <img class="logo" src="images/logo.png" alt="" />

            <div class="game-score-box">
                <p>本次成绩:<span id="score">0</span></p>
            </div>
            <div class="game-score-history">历史最佳:<span>68598</span></div>

            <div class="game-background animate__animated">
                <div class="game-background-sky">
                    <img src="images/game_bg_repeat.jpg" alt="" />
                    <img src="images/game_bg_repeat.jpg" alt="" />
                    <div>
                        <div class="cloud"></div>
                        <div class="cloud"></div>
                    </div>
                </div>
                <div class="game-background-ground"></div>
            </div>

            <img class="game-start-tips animate__animated animate__flash animate__infinite animate__slower" src="images/game_start_img.png" width="100%" alt="" />
            <img class="game-lose-tips animate__animated animate__flash animate__infinite animate__slower" src="images/game_lose_tips.png" width="100%" alt="" />

            <div class="game-person" id="person">
                <div class="game-person-shield"></div>
                <div class="person-hit-box" id="hit"></div>
            </div>

<!--            <div class="meteor fly"></div>-->
        </div>

        <script type="text/javascript" src="js/jquery-2.1.0.js"></script>
        <script type="text/javascript" src="js/howler.min.js"></script>
        <script type="text/javascript" src="js/music.js"></script>
        <script type="text/javascript">
            $('.share-btn').click(function (e) {
                window.location.href = 'poster.html';
            })

            $('.play-again-btn').click(function (e) {
                $('.pop-box').hide();
                $('#choose1').show();
                init();
            })

            $('.game-tips-confirm').click(function (e) {
                if ($('.chosen').hasClass('male')){
                    choosePerson = 'male';
                }else{
                    choosePerson = 'female';
                }
                $('#person').addClass(choosePerson);
                $('.pop-bg').removeClass('show');
                $('#gameTips').hide();
                $('#choose1').hide();
                $('.game-start-tips').show();

                window.addEventListener('touchstart',touchStartFun,{passive: false});
                window.addEventListener('touchmove',touchMoveFun,{passive: false});
                window.addEventListener('touchend',touchEndFun,{passive: false});
            })

            $('.choose-confirm').click(function (e) {
                $('#choose').hide();
                $('#gameTips').show();
            })

            $('.choose-box-item').click(function (e) {
                $('.choose-box-item').removeClass('chosen');
                $(this).addClass('chosen');
            })

            let fps = 60, now, then = Date.now(), interval = 1000 / fps, delta, frame, forTime = 0;
            let hasShield = false;
            let hasUp = false;
            let startItem = false;
            let choosePerson = '';
            let touchConfirm = false;
            let itemFlySpeed = 3;
            let itemArr = ['boom','shield','up'];
            let score = 1;
            let newSpeed = .5;
            let itemSwitch = false;
            let levelUpNum = 200;
            let gameStartConfirm = false;
            let personPosition = 0;
            let gameLoseTips = false;
            let meteorRound;
            let meteorNum = 0;

            $(document).ready(function (e) {
                $('.pop-bg').addClass('show');
                $('#choose').show();
            });
            
            function init() {
                hasShield = false;
                hasUp = false;
                startItem = false;
                choosePerson = '';
                touchConfirm = false;
                itemFlySpeed = 3;
                score = 1;
                newSpeed = .5;
                itemSwitch = false;
                levelUpNum = 200;
                gameStartConfirm = false;
                personPosition = 0;
                gameLoseTips = false;
                meteorNum = 0;
                $('.game-item').remove();
                $('.game-background').removeClass('bgRound bgRoundInf animate__infinite paused');
                $('#person').removeAttr('style');
                $('#person').removeClass('male female fly fallDown animate__shakeY animate__animated animate__infinite animate__slower');
            }

            function gameStart() {
                personPosition = $(window).height()-($('#person').offset().top+$('#person').height());

                $('.game-background').addClass('bgRound');
                setTimeout(function () {
                    $('.game-background').removeClass('bgRound');
                    $('.game-background').addClass('bgRoundInf animate__infinite');
                    startItem = true;
                },3000);

                meteorRound = setInterval(function () {
                    let randomLeft = Math.round(Math.random()*100);
                    let randomTop = Math.round(Math.random()*-50);
                    $('.page').append('<div class="meteor" id="'+ meteorNum +'" style="left: '+randomLeft+'%; top: '+randomTop+'%;"></div>');
                    $('#'+meteorNum).addClass('fly').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function () {$(this).remove();});
                    meteorNum++;
                },1000);
            }
            
            function levelUpFun() {
                if (itemFlySpeed <= 1) return;
                levelUpNum += (levelUpNum*2);
                console.log(levelUpNum);
                console.log('speed UP!!!');
                if (itemFlySpeed <= 2){
                    itemFlySpeed -= .25;
                }else {
                    itemFlySpeed--;
                }
                if (hasUp) return;
                $('.game-background').css('animation-duration',itemFlySpeed + 's');
            }

            function gameRound() {
                //console.log('111');
                forTime++;
                if (hasUp){
                    if (forTime%newSpeed == 0) {
                        score++;
                        $('#score').html(score);
                        if (score%levelUpNum == 0) levelUpFun();
                        if (score == 5000) {
                            $('.game-background-sky').find('img').eq(0).attr('src','images/game_bg_repeat1.jpg');
                            $('.game-background-sky').find('img').eq(1).attr('src','images/game_bg_repeat1.jpg');
                            $('.game-background-sky').find('div').fadeOut();
                        }
                    }
                }else{
                    if (forTime%itemFlySpeed == 0) {
                        score++;
                        $('#score').html(score);
                        if (score%levelUpNum == 0) levelUpFun();
                        if (score == 5000) {
                            $('.game-background-sky').find('img').eq(0).attr('src','images/game_bg_repeat1.jpg');
                            $('.game-background-sky').find('img').eq(1).attr('src','images/game_bg_repeat1.jpg');
                            $('.game-background-sky').find('div').fadeOut();
                        }
                    }
                }
                if (!startItem) return;

                if (hasUp){
                    if (forTime%(newSpeed*16) == 0 && !itemSwitch) {
                        addItem(newSpeed);
                    }
                }else{
                    if (forTime%(itemFlySpeed*16) == 0) {
                        addItem(itemFlySpeed);
                    }
                }

                if ($('.game-item').length == 0) return;
                for (let i=0;i<$('.game-item').length;i++){
                    if ($('.game-item').eq(i).offset().top > $(window).height()/2 && $('.game-item').eq(i).offset().top < $(window).height()){
                        if (hitTestObject($('.game-item').eq(i), $('#hit'))) {
                            hitObjectFun($('.game-item').eq(i));
                        }
                    }
                    if ($('.game-item').eq(i).offset().top > $(window).height()){
                        $('.game-item').eq(i).remove();
                    }
                }
            }

            function addItem(speed) {
                let randomItemChoose = Math.floor(Math.random()*20);
                let randomItemLeft = Math.floor(Math.random()*70)+10;
                let itemChoose = '';
                if (randomItemChoose <= 17){
                    itemChoose = itemArr[0];
                }else if (randomItemChoose == 18) {
                    itemChoose = itemArr[1];
                }else if (randomItemChoose == 19) {
                    itemChoose = itemArr[2];
                }
                $('.page').append('<div class="game-item '+ itemChoose +' animate__animated itemFly" style="animation-duration: '+ speed +'s; left: '+ randomItemLeft +'%"></div>');
            }

            function hitObjectFun(item) {
                item.remove();
                if (item.hasClass('up')) {
                    if (hasUp) return;
                    hasUp = true;
                    $('#person').addClass('bigFire');
                    $('.game-background').css('animation-duration',newSpeed+'s');
                    $('.game-item').remove();
                    setTimeout(function (e) {
                        itemSwitch = true;
                        $('#person').removeClass('bigFire');
                        setTimeout(function () {
                            itemSwitch = false;
                            hasUp = false;
                            $('.game-background').css('animation-duration',itemFlySpeed + 's');
                        },500);
                    },3000);
                }
                if (item.hasClass('shield')) {
                    if (hasUp) return;
                    hasShield = true;
                    $('#person').addClass('shield');
                }
                if (item.hasClass('boom')) {
                    if (hasUp) return;
                    if (hasShield) {
                        $('#person').removeClass('shield');
                        hasShield = false;
                        return;
                    }
                    //gameOver();
                }
            }
            
            function gameOver() {
                window.removeEventListener('touchstart',touchStartFun,{passive: false});
                window.removeEventListener('touchmove',touchMoveFun,{passive: false});
                window.removeEventListener('touchend',touchEndFun,{passive: false});

                window.cancelAnimationFrame(frame);
                clearInterval(meteorRound);
                $('.game-lose-tips').hide();
                $('.game-background').addClass('paused');
                $('.game-background').removeAttr('style');
                $('.pop-bg').addClass('show');
                if (score < 666){
                    $('#gameOverFailed').show();
                }else{
                    $('#gameOverSuccess').show();
                }
                //alert('game over!!');
            }

            function touchStartFun (event){
                let e = event || window.event;
                e.preventDefault();
                try {
                    let touch = e.touches[0];
                    if ($(touch.target).hasClass('game-person') || $(touch.target).offsetParent().hasClass('game-person')) {
                        console.log('按住牛啦！！');
                        if (gameLoseTips) {
                            gameLoseTips = false;
                            $('.game-lose-tips').hide();
                            tick();
                            $('.game-item').removeClass('paused');
                            $('.game-background').removeClass('paused');
                            $('#person').removeClass('fallDown');
                            $('#person').addClass('animate__shakeY animate__animated animate__infinite animate__slower');
                            $('#person').stop();
                            $('#person').animate({
                                bottom: personPosition+'px'
                            },{
                                duration: 2000,
                                easing: 'linear',
                            })
                        }
                        if (!gameStartConfirm){
                            gameStartConfirm = true;
                            $('.game-start-tips').hide();
                            $('#person').addClass('fly animate__shakeY animate__animated animate__infinite animate__slower');
                            gameStart();
                            tick();
                        }
                        touchConfirm = true;
                    }else{
                        touchConfirm = false;
                    }
                } catch (e) {
                    alert('touchSatrtFunc：' + e.message);
                }
            }

            function touchMoveFun (event) {
                let e = event || window.event;
                e.preventDefault();
                try {
                    let touch = e.touches[0];
                    let x = Number(touch.pageX);

                    if (touchConfirm) {
                        //console.log($('#person').offset().left);
                        if (x <= (0+$('#person').width()/2)) x=0+$('#person').width()/2;
                        if (x >= $(window).width()-$('#person').width()/2) x=$(window).width()-$('#person').width()/2;
                        $('#person').css('left',(x - $('#person').width()/2)+'px');
                    }
                } catch (e) {
                    alert('touchMoveFunc：' + e.message);
                }
            }

            function touchEndFun (event) {
                let e = event || window.event;
                e.preventDefault();
                try {
                    if (!gameStartConfirm || gameLoseTips || hasUp) return;
                    console.log('松手啦！！！');
                    gameLoseTips = true;
                    $('.game-lose-tips').show();
                    window.cancelAnimationFrame(frame);
                    $('.game-item').addClass('paused');
                    $('.game-background').addClass('paused');
                    $('#person').addClass('fallDown');
                    $('#person').removeClass('animate__shakeY animate__animated animate__infinite animate__slower');
                    $('#person').stop();
                    $('#person').animate({
                        bottom: '-4.5rem'
                    },{
                        duration: 2000,
                        easing: 'linear',
                        complete: function () {
                            console.log('gameOver!!');
                            gameOver();
                        }
                    })
                    //$('#person').css('bottom',personPosition+'px');
                } catch (e) {
                    alert('touchMoveFunc：' + e.message);
                }
            }

            function hitTestObject(item,hitObj){
                if(item == null || hitObj == null) return;
                let itemTop = item.offset().top,
                    itemFoot = item.offset().top + parseInt(item.height()),
                    itemLeft = item.offset().left,
                    itemRight = item.offset().left + parseInt(item.width());
                let hitTop = hitObj.offset().top,
                    hitFoot = hitObj.offset().top + parseInt(hitObj.height()),
                    hitLeft = hitObj.offset().left,
                    hitRight = hitObj.offset().left + parseInt(hitObj.width());
                if(itemFoot > hitTop && itemRight > hitLeft && itemTop < hitFoot && itemLeft < hitRight){
                    return true;
                }
            }

            function tick() {
                window.cancelAnimationFrame(frame);
                frame = window.requestAnimationFrame(tick);
                now = Date.now();
                delta = now - then;
                if (delta > interval) {
                    then = now - (delta % interval);
                    gameRound();
                }
            }
        </script>
	</body>
</html>
